<template>
  <div id="password">
    <!-- <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }" style="padding-left: 10px;">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>修改密码</b></el-breadcrumb-item>
    </el-breadcrumb> -->
    <div id="home" style="background:#fff;border-radius:5px;margin:20px; padding:20px;width: calc(100% - 60px);height:700px">
            <el-form :model="modPasswordForm" label-width="80px" :rules="modPasswordFormRules" ref="modPasswordForm" style="width:800px;margin:50px auto 0">
              <el-form-item label="">
                <span style="font-size:var(--size24) !important;">请修改密码</span><br>密码规则：长度10位及以上，数字、大写字母、小写字母至少包含两种，不含特殊字符。
              </el-form-item>
              <el-form-item label="用户名">
                {{username}}
              </el-form-item>
              <el-form-item label="原密码" prop="OldPasswordx">
                <el-input type="password" v-model="modPasswordForm.OldPasswordx" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="NewPassword">
                <el-input type="password" v-model="modPasswordForm.NewPassword" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="重复密码" prop="RepetPassword">
                <el-input type="password" v-model="modPasswordForm.RepetPassword" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click.native="modPasswordSubmit" :loading="modPasswordFormLoading">提交</el-button>
              </el-form-item>
            </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    var validatePassword = (rule, value, callback) => {
      // 密码规则校验
      var num = 0
      var rule1 = /\d+/
      var rule2 = /[a-z]+/
      var rule3 = /[A-Z]+/
      var rule5 = /^.{10,32}$/
      var ruleAll = /^[a-zA-Z0-9]+$/
      var flag1 = rule1.test(value)
      var flag2 = rule2.test(value)
      var flag3 = rule3.test(value)
      var flag5 = rule5.test(value)
      if (flag1) {
        num = num + 1
      }
      if (flag2) {
        num = num + 1
      }
      if (flag3) {
        num = num + 1
      }
      if (!rule5.test(value)) {
        callback(new Error('密码长度必须是10位及以上，32位以下！'))
      }
      if (!ruleAll.test(value)) {
        callback(new Error('密码不能包含特殊字符！'))
      }
      if (!(num > 1 && flag5)) {
        callback(new Error('密码必须是10位及以上数字、大、小写字母中的两种及两种以上的组合，不含特殊字符！'))
      } else {
        callback()
      }
    }
    var validateRepetPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.modPasswordForm.NewPassword) {
        callback(new Error('两次输入新密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      username: '',
      modPasswordFormRules: {
        OldPasswordx: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        NewPassword: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        RepetPassword: [
          { validator: validateRepetPassword, trigger: 'blur' }
        ]
      },
      modPasswordFormLoading: false,
      modPasswordForm: {OldPasswordx: '', NewPassword: '', RepetPassword: ''}
    }
  },
  methods: {
    modPasswordSubmit: function () {
      this.$refs.modPasswordForm.validate((valid) => {
        if (valid) {
          this.modPasswordFormLoading = true
          let para = {
            oldp: this.modPasswordForm.OldPasswordx,
            newp: this.modPasswordForm.NewPassword
          }
          this.$http.post(`/admin/changepassword`, para).then(response => {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              this.$confirm('修改密码成功', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '',
                showCancelButton: false,
                type: 'success'
              }).then(() => {
                this.$router.push({ path: '/' })
              }).catch(() => {
                this.$router.push({ path: '/' })
              })
              this.modPasswordFormLoading = false
              localStorage.setItem('pwdFlag', true)
              localStorage.setItem('pwdtimestamp', new Date().getTime())
            } else {
              console.log('修改密码失败:' + response.data.Msg)
              this.$message({
                message: '修改密码失败:' + response.data.Msg,
                type: 'error'
              })
              this.modPasswordFormLoading = false
            }
            this.$refs['modPasswordForm'].resetFields()
          }).catch(error => {
            console.log(error)
            this.$message({
              message: '修改密码失败:' + error,
              type: 'error'
            })
            this.$refs['modPasswordForm'].resetFields()
            this.modPasswordFormLoading = false
          })
        }
      })
    }
  },
  mounted () {
    this.username = localStorage.getItem('user')
    this.userRoles = JSON.parse(localStorage.getItem('Roles'))
    console.log(this.userRoles)
  }
}
</script>
<style scoped>
</style>
